<template>
  <div class="topBar">
    <div class="item">
      <span>直播</span>
    </div>
    <div class="item">
      <span class="iconfont icon-search" @click="gotoFind"></span>
      <input type="text" v-model="findList">
    </div>
    <div class="item">
      <span class="iconfont icon-icon--tianjia" @click="gotoShare"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: "TopBar",
  data(){
    return{
      findList:''
    }
  },
  methods: {
    gotoShare() {
      if (sessionStorage.getItem('user') == null) {
        this.$router.push('/sign')
      } else {
        this.$router.push('/share')
      }
    },
    gotoFind() {
      this.$router.push({
        name:'findindex',
        params:{texttitle:this.findList}
      })
    }
  }
}
</script>

<style scoped>
input {
  background: none;
  outline: none;
  border: 1px solid #ccc;
}

input:focus {
  border: none;
}

.topBar {
  z-index: 999;
  opacity: 1;
  height: 40px;
  line-height: 40px;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-items: center;
  width: 100%;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.9);
  background-color: #ffffff;
}

.topBar .item:nth-child(1) {
  width: 20%;
}

.topBar .item:nth-child(2) {
  width: 60%;
  border-radius: 15px;
  background-color: #ccc;
}

.topBar .item:nth-child(3) {
  width: 20%;
  font-size: 32px;
  color: skyblue;
}

.topBar .item {
  text-align: center;
  font-size: 16px;
}

.topBar .item .iconfont {
  font-size: 25px;
}

</style>